<template>
	<view class="code" :style="theme">
		<view class="code_box">
			<view class="code_box_left"></view>
			<view class="code_box_right"></view>
			<view class="code_box_title">
				<text>{{venName}}</text>
				<text>二维码对准闸机扫描口刷码进入</text>
			</view>
			<view class="code_box_x"></view>
			<view class="code_box_code">
				<canvas canvas-id="qrcode" style="width: 150px;height: 150px;margin: 0 auto;"/>
			</view>
		</view>
		<view class="code_text">
			<text>温馨提示：</text>
			<text>1、二维码有效期为1分钟</text>
			<text>2、距离扫描口10公分为最佳识别高度</text>
			<text>3、若扫码无法进入场馆，请联系现场工作人员</text>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				code: '',
				venName: '',
				url: ''
			}
		},
		onLoad(ops) {
			this.code = ops.code
			this.venName = ops.venName || this.venueName
			this.qrFun(ops.code)
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			qrFun: function(text) {
				uni.showLoading({ title: '加载中...' })
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 150,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						 uni.hideLoading()
					}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.code {
		overflow: hidden;
		height: 100vh;
		background: $color;
	}
	.code_box {
		position: relative;
		width: calc(100% - 80rpx);
		padding: 40rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 15rpx;
		margin-left: 40rpx;
		margin-top: 80rpx;
	}

	.code_box_left {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 175rpx;
		left: -20rpx;
		border-radius: 50%;
		background: $color;
	}

	.code_box_right {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 175rpx;
		right: -20rpx;
		border-radius: 50%;
		background: $color;
	}

	.code_box_title {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.code_box_title text:nth-child(1) {
		font-size: 36rpx;
		font-weight: bold;
		color: #222222;
	}

	.code_box_title text:nth-child(2) {
		font-size: 24rpx;
		font-weight: 400;
		color: $color;
		margin-top: 14rpx;
	}

	.code_box_x {
		height: 1rpx;
		background: #E5E5E5;
		margin: 60rpx 0;
	}

	.code_box_code {
		display: flex;
		justify-content: center;
	}

	.code_box_refresh {
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
	}

	.code_box_refresh_btn {
		width: 260rpx;
		height: 80rpx;
		background: $moreColor;
		border-radius: 46rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.code_text {
		margin-top: 48rpx;
		width: calc(100% - 80rpx);
		box-sizing: border-box;
		margin-left: 40rpx;
		display: flex;
		flex-direction: column;
	}

	.code_text text {
		font-size: 30rpx;
		font-weight: 400;
		margin-top: 15rpx;
		color: rgba(255, 255, 255, 0.9);
	}

	.code_text text:nth-child(1) {
		font-weight: 600;
		margin-top: 0;
	}

	.code_text text:nth-child(2) {
		margin-top: 15rpx;
	}

	.canvas {
		position: fixed;
		top: -100%;
		left: 0;
	}
</style>
